<template>
<div class="editor-page">
    <div class="container page">
        <div class="row">

            <div class="col-md-10 offset-md-1 col-xs-12">
                <form>
                <fieldset>
                    <fieldset class="form-group">
                        <input :disabled="publishing" v-model="title" type="text" class="form-control form-control-lg" placeholder="Article Title" required>
                    </fieldset>
                    <fieldset class="form-group">
                        <input :disabled="publishing" v-model="description" type="text" class="form-control" placeholder="What's this article about?" required>
                    </fieldset>
                    <fieldset class="form-group">
                        <textarea :disabled="publishing" v-model="body" class="form-control" rows="8" placeholder="Write your article (in markdown)" required></textarea>
                    </fieldset>
                    <fieldset class="form-group">
                        <input @keyup.enter="onAddTag" :disabled="publishing" v-model="tag" type="text" class="form-control" placeholder="Enter tags">
                        <div class="tag-list">
                            <span 
                                v-for="tag in tags"
                                :key="tag"
                                class="tag-default tag-pill ng-binding ng-scope"
                            >
                                <i class="ion-close-round" @click="onRemoveTag(tag)"></i>
                                {{tag}}
                            </span>
                        </div>
                    </fieldset>
                    <button class="btn btn-lg pull-xs-right btn-primary" type="button" @click="onSubmit">
                        Publish Article
                    </button>
                </fieldset>
                </form>
            </div>

        </div>
    </div>
</div>
</template>

<script>
import { mapState } from 'vuex'

import { createArticle, updateArticle, getArticle } from '@/api/article'

export default {
    // 在路由匹配组件之前会执行中间件处理
    middleware: 'authenticated',
    name: 'editor',
    data() {
        return {
            title: '',
            description: '',
            body: '',
            tags: [],
            // 
            tag: '',
            publishing: false
        }
    },
    computed: {
        ...mapState(['user'])
    },
    async mounted() {
        if (this.$route.params.slug) {
            // 编辑模式
            this.publishing = true
            const slug = this.$route.params.slug
            const { data: {article} } = await getArticle(slug)
            this.title = article.title
            this.body = article.body
            this.description = article.description
            this.tags = article.tagList
            this.publishing = false
        }
    },
    methods: {
        onAddTag(e) {
            e.preventDefault()
            // 有输入 并且不存在于tags防止重复添加
            if (this.tag && !this.tags.includes(this.tag)) {
                this.tags.push(this.tag)
                this.tag = ''
            }
        },
        onRemoveTag(tag) {
            const index = this.tags.findIndex(item => item === tag)
            this.tags.splice(index, 1)
        },
        async onSubmit() {
            this.publishing = true
            const articleObj = {
                article: {
                    title: this.title,
                    description: this.description,
                    body: this.body,
                    tagList: this.tags
                }
            }

            try {
                const { data: { article } } = this.$route.params.slug ? await updateArticle(this.$route.params.slug, articleObj) : await createArticle(articleObj)
                this.$router.push({
                    name: 'article',
                    params: {
                        slug: article.slug
                    }
                })
            } catch(error) {
                alert(error)
            }
            this.publishing = false
        }
    },
    // beforeRouteUpdate(to, from, next) {
    //     // 阻止复用路由

    //     next(false)
    // }
}
</script>

<style>

</style>